<template>
	<div class="cart bg">
		<goback title="积分商城"></goback>


		<ul class="TopNav">
			<li @click="changeSwiper(0)" :class="{ 'select': activePage === 0 }">
				兑换商城
			</li>
			<li @click="changeSwiper(1)" :class="{ 'select': activePage === 1 }">
				我的兑换
			</li>
		</ul>
		
		<swiper class="swiper-container" @slideChange="onSlideChange" ref="mySwiper">
			<swiper-slide class="swiper-slide">
				<div class="mall-container">
						<div class="product-item card" v-for="product in products">
							<img :src="product.image" :alt="product.cartName"
								class="product-image" />
							<div class="product-info">
								<h3 class="product-name">{{ product.cartName }}</h3>
								<p class="product-price">价格: {{ product.score }} 积分</p>
							</div>
							<button class="exchange-button" @click="exchangeProduct(product.cartID)">兑换</button>
						</div>
				</div>
			</swiper-slide>
			<swiper-slide class="swiper-slide">
				<div class="card" v-if="has_Get!=null && has_Get.length!=0" v-for="product in has_Get">
					<div class="card_title">{{product.cartItem.cartName}}</div>
					<div class="box_inner">
						<img :src="product.cartItem.image" :alt="product.cartName"
							class="product-image" />
							<div class="info">
								<div>收货人:{{product.name}}</div>
								<div>收货电话:{{product.telephone}}</div>
								<div>收货地址:{{product.addresses}}</div>
								<div>价格: {{ product.cartItem.score }} 积分</div>
								<div>兑换时间:{{formatDate(product.timestamp)}}</div>
							</div>
					</div>
				</div>
						<!-- <div class="card" v-for="product in has_Get">
							
							<div class="product-info">
								<h3 class="product-name">{{ product.cartItem.cartName }}</h3>
								<p class="product-price"></p>
								<p class="product-price"></p>
								
							</div>
							<button class="exchange-button" @click="exchangeProduct(product.cartID)">兑换</button>
						</div> -->
			</swiper-slide>
		</swiper>



		
		<copyright></copyright>
	</div>
	
</template>

<script>
	export default {
		name: "cart",
		data() {
			return {
				products: [],
				activePage: 0,
				has_Get:[]
			};
		},
		mounted() {
			this.getData();
		},
		computed: {

		},
		methods: {
			formatDate(timestamp) {
				const date = new Date(timestamp); // JavaScript时间戳是以毫秒为单位的，所以需要乘以1000  
				const year = date.getFullYear();
				const month = this.padZero(date.getMonth() + 1); // getMonth()返回的月份是从0开始的，所以需要加1  
				const day = this.padZero(date.getDate());
				const hour = this.padZero(date.getHours());
				const minutes = this.padZero(date.getMinutes());
				return ` ${year}-${month}-${day} ${hour}:${minutes}`;
			},
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			onSlideChange() {
				this.activePage = this.$refs.mySwiper.swiperInstance.activeIndex;
			},
			changeSwiper(e) {
				this.$refs.mySwiper.swiperInstance.activeIndex = e;
				this.activePage = e;
				if(e==1){
					this.getHasExchange();
				}
			},
			getHasExchange(){
				this.axios.get(`${this.IP}/cart_my_exchange_list`, {
					params: {
						token: this.getStorage("token"),
					}
				}).then(res => {
					if(res.data.includes('当前暂无兑换,请继续努力')){
						this.has_Get=null;
						this.$toast.showMessage(res.data);
					}else{
						this.has_Get = res.data;
						this.has_Get.forEach((e)=>{
							e.cartItem.image = `${this.IP}/item_images/${e.cartItem.image}`;
						})
					}
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			getData(){
				this.axios.get(`${this.IP}/cart_list`, {
					params: {
						token: this.getStorage("token"),
					}
				}).then(res => {
					this.products = res.data;
					this.products.forEach((e)=>{
						e.image = `${this.IP}/item_images/${e.image}`;
					})
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			exchangeProduct(index) {
				this.axios.get(`${this.IP}/cart_exchange`, {
					params: {
						token: this.getStorage("token"),
						cartid: index
					}
				}).then(res => {
					this.$toast.showMessage(res.data);
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
		}
	}
</script>

<style scoped>
.TopNav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #ebebeb;
		background-color: #f3f3f3;
		margin: 0 auto;
		width: 99vw;
	}
	.box_inner{
		display:flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.box_inner img{
		margin: 3vw;
		width: 200px;
		height: 190px;
	}
	.box_inner .info{
		margin-top: 2vw;
	}

	.TopNav li {
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 3vw;
		color: #333;
	}

	.TopNav li.select {
		border-bottom: 2px solid #fc9b39;
		font-weight: bold;
	}
	
	.mall-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 3vw;
		margin: 3vw;
		align-items: center;
		justify-content: flex-start;
		
	}

	.product-item {
		width: 34vw;
		/* 减去一些间距 */
		text-align: center;
		margin: 2vw;
		border: 2px solid #e5e5e5;
		border-radius: 20px;
		/* 添加边框 */
		padding: 2vw;
	}

	.product-price {
		color: #666;
		width: 25vw;
		padding: 1vw;
	}

	.exchange-button {
		margin-top: 10px;
		padding: 5px 10px;
	}

	.product-image {
		width: 200px;
		height: 180px;
		margin-bottom: 10px;
		border: 1px solid #b6b6b6;
		border-radius: 10px;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-name {
		margin-bottom: 5px;
		font-size: 28px;
		color: #333;
	}

	.product-price {
		color: #666;
	}

	.exchange-button {
		margin-top: 1vw;
		padding: 1vw 4vw;
		background-color: #444;
		/* background: linear-gradient(to bottom, #3eff21, #47ff72); */
		border-radius: 2vw;
		color: white;
		border: none;
	}
</style>